<template>
  <el-dialog draggable overflow :title="titleMap[mode]" v-model="visible" :width="400" destroy-on-close
    @closed="$emit('closed')">

    <el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="right">
      <el-row>
        <el-col :span="18" v-if="form.material.name">
          <el-form-item label="产品名" prop="material_id">
            <el-input label="产品名" v-model="form.material.name" readonly clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="18">
          <el-form-item label="批号名称" prop="name">
            <el-input v-model="form.name" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="18" v-if="form.company.name">
          <el-form-item label="往来单位" prop="company_id">
            <el-input v-model="form.company.name" clearable readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="成分" prop="comp">
            <el-input type="textarea" v-model="form.comp" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="form.remark" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import tool from '@/utils/tool';
import skDicSelect from "@/components/skDicSelect";
import skUnitSelect from "@/components/skUnitSelect";
import skDicCheckBox from "@/components/skDicCheckBox";
import skSelectGroup from "@/components/skSelectGroup";
export default {
  emits: ["success", "closed", "update:modeValue"],
  components: { skDicCheckBox, skDicSelect, skUnitSelect, skSelectGroup },
  data() {
    return {

      mode: "add",
      diccode: "CostType",
      unit: "All",
      titleMap: {
        add: "新增物料",
        edit: "编辑物料",
      },
      form: {
        id: "",
        material_id: "",
        company_id: "",
        company: { name: "" },
        material: { name: "" },
        name: "",
        comp: "",
        remark: "",
      },
      rules: {
        name: [{ required: true, message: "请输入名称" }],
        material_id: [{ required: true, message: "请选择产品" }],
        company_id: [{ required: true, message: "请输入往来单位" }],
      },
      visible: false,
      isSaveing: false,
    };
  },

  mounted() {


  },
  methods: {
    //显示
    close() {
      this.visible = false;
      this.$emit("update:modeValue", false);
      this.$emit("closed");
    },
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },

    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;

          var res = await this.$API.basedata.lot.save.post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
          } else {
            this.$alert(res.message, "提示", { type: "error" });
          }
        }
      });
    },
    //表单注入数据
    setData(data, row = null) {
      data = tool.removeNull(data);
      row = tool.removeNull(row);
      if (row != null) {
        // 通过autocomplete 弹窗编辑 
        this.form.company = row.company ?? {};
        this.form.company_id = row.company_id;
        this.form.material = row.material ?? {};
        this.form.material_id = row.material_id;
      }
      Object.assign(this.form, data);
    },
  },
};
</script>

<style></style>
